<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="node_modules/bootstrap/dist/css/bootstrap.min.css"
    />
  </head>
  <body class="m-1">
    <h3 class="bg-primary text-white p-3">Adam's To Do List</h3>
    <div class="my-1">
      <!-- input是常见的自闭元素，class是元素属性有值， 
            required这种是不需要值就可以生效的属性 -->
      <input class="form-control" required />
      <!-- <button class="btn btn-lg btn-primary mt-1">Add</button> -->
      <button class="btn btn-primary mt-1">Add</button>
      <!-- <button class="btn btn-sm btn-primary mt-1">Add</button> -->
    </div>
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>Description</th>
          <th>Done</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Buy Flowers</td>
          <td>No</td>
        </tr>
        <tr>
          <td>Get Shoes</td>
          <td>No</td>
        </tr>
        <tr>
          <td>Collect Tickets</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>Call Joe</td>
          <td>No</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
